<template>
  <div class="home">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="未读消息" name="first">
        <div
          class="slide"
          v-for="(item, index) in showList"
          :key="index"
          v-show="item.status == 0"
        >
          {{ item.title }}
          <button @click="onClickYidu(item)">标为已读</button>
        </div>
        <button @click="onClickQb">全部</button>
      </el-tab-pane>
      <el-tab-pane label="已读消息" name="second">
        <div
          class="slide"
          v-for="(item, index) in showList"
          :key="index"
          v-show="item.status == 1"
        >
          {{ item.title }}
          <button @click="onClickWeidu(item)">标为未读</button>
          <button @click="onClickRemove(item)">删除</button>
        </div>
        <button @click="onClickQb1">全部</button>

      </el-tab-pane>
      <el-tab-pane label="回收站" name="third">
        <div
          class="slide"
          v-for="(item, index) in showList"
          :key="index"
          v-show="item.status == 2"
        >
          {{ item.title }}
          <button @click="onClickHy(item)">还原</button>
        </div>
        <button @click="onClickQb2">全部</button>

      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "second",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    onClickYidu(item) {
      // console.log(item);
      this.$store.commit("yidu", item);
    },
    onClickHy(item) {
      this.$store.commit("hy", item);
    },
    onClickWeidu(item) {
      this.$store.commit("weidu", item);
    },
    onClickRemove(item) {
      this.$store.commit("remove", item);
    },
    onClickQb(){
      this.$store.commit("qb")
    },
     onClickQb1(){
      this.$store.commit("qb1")
    },
     onClickQb2(){
      this.$store.commit("qb2")
    }
  },
  computed: {
    showList: function () {
      return this.$store.state.list;
    },
  },
};
</script>
<style lang="scss">
.slide {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
</style>
